<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>warp</title>
    <style>
      .c1 {
        border: 1px solid;
        width: 8em;
        /* 超长单词 是否折行 尽量保持完整行 */
        overflow-wrap: normal;
        /* 是以一句话为单位 还是以一个词为基本单位 进行折行  */
        word-break: normal;
        /* 控制是否换行 */
        white-space: normal;
      }
    </style>
  </head>
  <body>
    <div class="c1">
      This is a long and Supercalifragilisticexpialidocious sentence.
      一二三四五六，七八九零一二，这是一句巨长巨长又没有空间可以换行的句子哦。
    </div>
  </body>
</html>
